<template>
  <div class="oil-color-left">
    <div class="left-title">
      <span class="title-ioc"></span>在线监测系统监控
    </div>
    <div class="left-cont borderStyle">
      <div class="five-menu-main-select centerbox">
        <span>变电站：</span>
        <el-select v-model="stationName2" @change="stationChange" filterable placeholder="请选择">
          <el-option
            v-for="item in stationName_options"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
      </div>
      <div class="tabNav-box">
        <div
          class="tabNav"
          v-for="(item, index) in newLeftData"
          :key="index"
          :class="isShow===item.path? 'background':''"
          @click="Jump(item.path,index,item)"
        >{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { publicAPIModule } from "@/store/modules/public";
import { OnlineMonitorModule } from "@/store/modules/OnlineMonitor";
import { GetSocketModule } from "@/store/modules/GetSocketData";

@Component
export default class extends Vue {
  public stationName2: string = "";
  //高亮状态
  public isShow: string = "OilColor";
  //左边导航字段
  SbArr = [];

  // 默认第一个 导航
  LeftNav = {};
  leftData = [];
  newLeftData = [];
  names = "";
  codes = "";
  //变电站下拉框改变
  stationChange(val) {
    console.log(this.leftData, 123);

    let resultArr = this.stationName_options.filter((item) => {
      return item.code === val;
    });
    // console.log(resultArr);

    let path = this.$route.path;
    this.codes = resultArr[0].code;
    this.names = resultArr[0].name;
    this.$router.push({
      path: path,
      query: {
        code: resultArr[0].code,
        name: resultArr[0].name,
      },
    });
  }
  //左侧导航切换
  // path=''
  Jump(path: string, index: number, item) {
    let query = {
      stationId: this.stationName2,
      type: item.name,
      name: this.routeObj.name,
      code: this.routeObj.code,
      // name:this.
    };
    if (this.names) {
      query.name = this.names;
      query.code = this.codes;
    }
    this.$router.push({
      path: `/onlinemonitor/${path}`,
      query: query,
    });
    console.log(item);

    this.LeftNav = item;
    OnlineMonitorModule.setsecondLevelObj(this.LeftNav);
  }
  get stationName_options() {
    return publicAPIModule.queryHasDataStationsList;
  }
  // 获取左侧菜单
  private getLeftmenu(stationId) {
    let form = {
      stationId: stationId,
      type: "在线监测",
    };
    (this as any).$services
      .getAuxiliaryMenu({ data: form, method: "get" })
      .then((result: any) => {
        // console.log("result:", result);
        let data = result.data;
        this.leftData = data;
        this.newLeftData = [];
        this.getContrastData();
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 对比接口和台账的数据
  getContrastData() {
    for (let key in this.leftData) {
      this.SbArr.filter((item) => {
        if (item.name === this.leftData[key].name) {
          console.log(item);
          if (
            item.sbValue == "0301" ||
            item.sbValue == "0308" ||
            item.sbValue == "0304" ||
            item.sbValue == "0314" ||
            item.sbValue == "0302"
          ) {
            this.newLeftData.push(item);
          }
        }
        return this.newLeftData;
      });
    }
    console.log(this.newLeftData);
    // this.leftData.map((i) => {
    //   if (i.name == "蓄电池") {
    //     this.newLeftData.push({
    //       index: 20,
    //       name: "蓄电池",
    //       path: "XDC",
    //       xtName: "在线监测",
    //       xtValue: "03",
    //     });
    //   }
    // });

    console.log(this.newLeftData);
    console.log(this.$route);
    var mode = this.newLeftData.filter((v) => {
      return v.path == this.$route.name;
    });
    // console.log(mode);
    if (mode.length <= 0) {
      this.Jump(this.newLeftData[0].path, 0, this.newLeftData[0]);
    }
  }
  // 获取台账管理里面的信息
  initLeftNav() {
    let zxdw = GetSocketModule.getterZxdw;
    // console.log(zxdw);
    var sbList = GetSocketModule.getterAllAuxiliaryByXtId["03"];
    // console.log("sbList:", sbList);

    // 将点位按照sysId分类
    let getJczzObj = (arr) => {
      let jczzObj = {};
      if (arr && arr.length) {
        arr.forEach((item) => {
          let key = item.sysId;
          jczzObj[key] = jczzObj[key] || [];
          jczzObj[key].push(item);
        });
      }

      // console.log(jczzObj)
      return jczzObj;
    };
    let zxjcSb = getJczzObj(sbList) || [];
    // console.log("zxjcSb:", zxjcSb);

    for (let key in zxjcSb) {
      var obj = {
        sysId: "",
        name: "",
        type: "",
        xtName: "",
        xtValue: "",
        path: "",
        sbValue: "",
        index: 0,
      };
      if (zxjcSb[key][0].sysId === "AD402A9D16BE53E4E0537FD7A8C03A44") {
        obj.path = "OilColor";
        obj.index = 0;
      } else if (zxjcSb[key][0].sysId === "AD402A9D16BF53E4E0537FD7A8C03A44") {
        obj.path = "IronCore";
        obj.index = 1;
      } else if (zxjcSb[key][0].sysId === "AD402A9D16C053E4E0537FD7A8C03A44") {
        obj.path = "Mechanical";
        obj.index = 2;
      } else if (zxjcSb[key][0].sysId === "AD402A9D16C153E4E0537FD7A8C03A44") {
        obj.path = "OpticalFiber";
        obj.index = 3;
      } else if (zxjcSb[key][0].sysId === "AD402A9D16C253E4E0537FD7A8C03A44") {
        obj.path = "SurgeArrester";
        obj.index = 4;
      } else if (zxjcSb[key][0].sysId === "AD402A9D16C353E4E0537FD7A8C03A44") {
        obj.path = "Voiceprint";
        obj.index = 5;
      } else if (zxjcSb[key][0].sysId === "AD402A9D16C453E4E0537FD7A8C03A44") {
        obj.path = "SwitchCabinet";
        obj.index = 6;
      } else if (zxjcSb[key][0].sysId === "AD402A9D16C553E4E0537FD7A8C03A44") {
        obj.path = "N2";
        obj.index = 7;
      } else if (zxjcSb[key][0].sysId === "AD402A9D16C653E4E0537FD7A8C03A44") {
        obj.path = "SF6";
        obj.index = 8;
      } else if (zxjcSb[key][0].sysId === "AD402A9D16C753E4E0537FD7A8C03A44") {
        obj.path = "HGIS";
        obj.index = 9;
      } else if (zxjcSb[key][0].sysId === "AD402A9D16BE53E4E0537FD7A8C03A46") {
        //id缺
        obj.path = "GYTGZHJC";
        obj.index = 10;
      } else if (zxjcSb[key][0].sysId === "AD402A9D16BE53E4E0537FD7A8C03A45") {
        //id缺
        obj.path = "YZFJKGJC";
        obj.index = 11;
      } else if (zxjcSb[key][0].sysId === "AD402A9D16BE53E4E0537FD7A8C03A47") {
        //id缺
        obj.path = "ZBJF";
        obj.index = 12;
      } else if (zxjcSb[key][0].sysId === "AD402A9D16BE53E4E0537FD7A8C03A48") {
        //id缺
        obj.path = "YWYWJC";
        obj.index = 13;
      }
      obj.sysId = zxjcSb[key][0].sysId;
      obj.name = zxjcSb[key][0].sysName;
      obj.type = zxjcSb[key][0].type;
      obj.xtName = zxjcSb[key][0].xtName;
      obj.xtValue = zxjcSb[key][0].xtValue;
      obj.sbValue = zxjcSb[key][0].sbValue;
      this.SbArr.push(obj);
    }
    this.SbArr = sortKey(this.SbArr, "index");
    function sortKey(array, key) {
      return array.sort(function (a, b) {
        var x = a[key];
        var y = b[key];
        return x < y ? -1 : x > y ? 1 : 0;
      });
    }
    // console.log(this.SbArr);
  }
  routeObj: any = {};
  private mounted(): void {
    // console.log(this.$route.query);
    // this.routeObj = this.$route.query;

    // if (this.$route.query.name) {
    //   var item = this.$route.query;

    //   (this as any).stationName2 = item.code;
    // }
    this.initLeftNav();
    // console.log(this.SbArr);
    if (this.SbArr && this.SbArr.length) {
      this.SbArr.forEach((item) => {
        if (item.path === this.$route.name) {
          this.LeftNav = item;
          OnlineMonitorModule.setsecondLevelObj(this.LeftNav);
        }
      });
    }
  }
  // 监听下拉框的值
  @Watch("stationName2")
  public aaaa() {
    console.log(222);

    let item = this.stationName_options.filter(
      (o) => o.code === this.stationName2
    )[0];
    if (item) {
      OnlineMonitorModule.setStationName(item);
    }

    this.getLeftmenu(this.stationName2);
  }
  @Watch("$route", { immediate: true, deep: true })
  public routechange(to: any, from: any) {
    // console.log(to);
    this.routeObj = this.$route.query;
    this.isShow = to.name;
    this.stationName2 = to.query.code;
  }
}
</script>

<style lang="scss" scoped>
.oil-color-left {
  width: 3.03rem;
  height: 100%;
  .left-title {
    font-size: 0.2rem;
    height: 0.4rem;
    width: 100%;
    line-height: 0.4rem;
    .title-ioc {
      display: inline-block;
      width: 16px;
      height: 16px;
      background: url(../../../assets/img/OnlineMonitor/icon_zxjk.png) no-repeat;
      background-size: 100% 100%;
      margin-right: 0.05rem;
      // vertical-align:baseline;
    }
  }
  .left-cont {
    // margin-top: 0.05rem;
    width: 100%;
    height: calc(100% - 0.4rem);
    .tabNav:nth-child(1) {
      border-top: 0.01rem solid rgba(95, 115, 171, 0.45);
    }
    .tabNav {
      height: 0.64rem;
      line-height: 0.64rem;
      font-size: 0.18rem;
      padding-left: 0.35rem;
      border-bottom: 0.01rem solid rgba(95, 115, 171, 0.45);
      cursor: pointer;
    }
    .tabNav:hover {
      border: none;
      background: linear-gradient(
        90deg,
        rgba(20, 123, 252, 0.65) 0%,
        rgba(20, 123, 252, 0.65) 53%,
        rgba(20, 123, 252, 0.5) 63%,
        rgba(20, 123, 252, 0) 100%
      );
    }
    .background {
      border: none;
      background: linear-gradient(
        90deg,
        rgba(20, 123, 252, 0.65) 0%,
        rgba(20, 123, 252, 0.65) 53%,
        rgba(20, 123, 252, 0.5) 63%,
        rgba(20, 123, 252, 0) 100%
      );
    }
    .tabNav-box {
      height: calc(100% - 0.8rem);
      overflow-y: auto;
      box-sizing: border-box;
      padding-bottom: 0.05rem;
    }
    .five-menu-main-select {
      height: 0.8rem;
    }
  }
}
</style>
